<script lang="ts" setup>
type Role = 'menuitem' | 'menuitemcheckbox' | 'menuitemradio';
withDefaults(
  defineProps<{
    disabled?: boolean;
    hidden?: boolean;
    role?: Role;
  }>(),
  {
    disabled: false,
    role: 'menuitem',
    hidden: false,
  },
);

const emit = defineEmits<{
  change: [event: Event];
}>();
const checked = defineModel<boolean | undefined>({
  default: false,
});
const handleChange = (event: Event) => {
  const target = event.target as any;
  emit('change', event);
  checked.value = target.checked;
};
</script>

<template>
  <fluent-menu-item
    :disabled="disabled"
    :role="role"
    :checked="checked"
    :hidden="hidden"
    @change="handleChange"
  >
    <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
    <span slot="indicator">
      <slot name="indicator"></slot>
    </span>
    <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
    <span slot="start">
      <slot name="start"></slot>
    </span>
    <slot></slot>
    <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
    <span slot="end">
      <slot name="end"></slot>
    </span>
    <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
    <span slot="submenu-glyph">
      <slot name="submenu-glyph"></slot>
    </span>
    <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
    <span slot="submenu">
      <slot name="submenu"></slot>
    </span>
  </fluent-menu-item>
</template>

<style scoped></style>
